<template>
	<div class="quanbu">
		<div class="xbox">
			<p>全部订单</p>
			<p>查看全部<i class="iconfont">&#xe633;</i></p>
		</div>
		<ul>
			<li class="swiper-slide"  v-for="item in list" :key="item.id">
				<img :src="item.imgURL" >
				<p>{{item.word}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Quanbu',
		data(){
			return{
				list:[
					{id:1,imgURL:'images/u2_1.png',word:'待付款'},
					{id:2,imgURL:'images/u2_2.png',word:'已付款'},
					{id:3,imgURL:'images/u2_3.png',word:'待付款'},
					{id:4,imgURL:'images/u2_4.png',word:'待付款'},	
				],	
			}
		}
	}
</script>

<style scoped>
	.quanbu{
		width: 95%;
		background-color: white;
		border-radius: 0.16rem;
		margin: 1rem auto 0.6rem;
		height: 3rem;
	}
	.quanbu .xbox{
		width: 90%;
		height: 1rem;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.quanbu .xbox p:first-child{
		font-size: 0.44rem;
		
	}
	.quanbu .xbox p:nth-child(2){
		color: #909090;
		
	}
	.quanbu .xbox p i{
		font-size: 0.1rem;
		color: #b1b1b1;
		font-weight: bold;
	}
	.quanbu ul{
		margin: auto;
		width: 80%;
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.quanbu ul li{
		width: 15%;
		height: 2rem;
		
	}
	.quanbu ul li img{
		width: 95%;
		height: 1rem;
		background-size: 100%;
	}
</style>
